<template>
  <div class="alloc-resource">
    <el-card>
        <!-- <div class="catgory">
          <el-checkbox :indeterminate="isIndeterminate"
           style="width: 100%;height:50px;background: rgb(242, 246, 252);line-height: 50px"
           v-model="checkAll"
           @change="handleCheckAllChange"
           v-for="item in roleResources" :label="item.name" :key="item.id">
          </el-checkbox>
        </div> -->
        <el-tree
          ref="resource-tree" node-key="id"
          :data="roleResources" :props="defaultProps"
          :default-checked-keys="checkedKeys"
          default-expand-all show-checkbox>
        </el-tree>
      <!-- <el-checkbox-group v-model="checkedResourcelists" @change="handleCheckedCitiesChange">
         <el-checkbox v-for="info in roleResourcelists" :label="info.name" :key="info.id">{{info.name}}</el-checkbox>
      </el-checkbox-group> -->
      <div style="marign: 50px;padding:10px">
        <el-button @click="onclear">清空</el-button>
        <el-button type="primary"
        @click="onSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// allocateRoleesources
import { getRoleResources, allocateRoleResources } from '@/services/resource'
export default {
  name: 'AllResource',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 存储所有的资源信息
      roleResources: [],
      defaultProps: {
        children: 'resourceList',
        label: 'name'
      },
      checkedKeys: []
    }
  },
  created () {
    // 加载所有的资源信息 用于展示tree结构
    this.loadRoleResources()
  },
  methods: {
    async loadRoleResources () {
      // console.log(this.roleId)
      // 获取角色拥有的资源信息
      const { data } = await getRoleResources(this.roleId)
      console.log(data)
      if (data.code === '000000') {
        this.roleResources = data.data
        this.getCheckedResources(data.data)
      }
    },
    // 用于筛选当前角色已分配的资源信息
    getCheckedResources (resources) {
      console.log(resources)
      // 遍历数组 将所有存在子节点的 node 排除 ，此时遍历子节点的列表进行筛选
      resources.forEach(resource => {
        // 所有选项都未选中 结束
        if (!resource.selected) {
          return
        }
        // 如果被选中，判断有无子节点
        if (resource.resourceList) {
          // 如果子节点存在 那么遍历子节点看子节点是否被选中
          return this.getCheckedResources(resource.resourceList)
        } else {
          // 已经被选中而且如果没有子节点 (被选中的叶子节点) 存储它的id
          this.checkedKeys = [...this.checkedKeys, resource.id]
          console.log(this.checkedKeys)
        }
      })
    },
    onclear () {
      this.$refs['resource-tree'].setCheckedKeys([])
    },
    async onSave () {
      console.log(this.$refs['resource-tree'].getCheckedKeys())
      // console.log(this.$refs['resource-tree'].getCheckedNodes())
      // 发送请求给角色分配资源 (传递参数是 角色ID以及给角色分配的资源ID)
      const { data } = await allocateRoleResources({
        roleId: this.roleId,
        resourceIdList: this.$refs['resource-tree'].getCheckedKeys()
      })
      console.log(data)
      if (data.code === '000000') {
        // 提示信息
        this.$message.success('分配资源成功!')
        // 跳转到角色页面
        this.$router.push({
          name: 'role'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
